<template>
  <Modal v-model="show"
         :styles="styles"
         :class-name="className"
         :mask-closable="maskclosable"
         @on-visible-change="onVisibleChange">
    <div slot="header"
         class="modal-header">
      <span style="margin:auto">{{title}}</span>
      <div class="modal-header-fullscreen"
           v-if="showFullscreen">
        <Icon type="ios-expand"
              color="#999"
              size="17"
              v-if="!fullscreen"
              @click="fullscreen = !fullscreen" />
        <Icon type="ios-contract"
              color="#999"
              size="17"
              v-if="fullscreen"
              @click="fullscreen = !fullscreen" />
      </div>
    </div>
    <slot></slot>
    <div slot="footer">
      <slot name="footer">
        <div class="modal-footer">
          <!-- <cus-button size="small"
                      class="mr_2"
                      @onClick="() => {this.show = false;}">取消</cus-button> -->
          <cus-button type="primary"
                      size="small"
                      @onClick="onOk">关闭</cus-button>
        </div>
      </slot>
    </div>
  </Modal>
</template>

<script>
export default {
  name: 'echart-modal',
  data () {
    return {
      // fullscreen: false,
      show: false
    }
  },
  props: {
    title: {
      type: String,
      default: '添加'
    },
    width: {
      type: [String, Number],
      default: 700
    },
    showFullscreen: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: false
    },

    maskclosable: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    styles () {
      let style = {}
      if (!this.fullscreen) {
        style.width = `${this.width}px`
      } else {
        style.width = '100%'
        style.top = 0
      }
      return style
    },
    className () {
      if (this.fullscreen) {
        return 'fullscreen-modal'
      } else {
        return ''
      }
    }
  },
  methods: {
    onOk () {
      this.$emit('onOk')
    },
    onVisibleChange (v) {
      this.$emit('on-visible-change', v)
    }
  }
}
</script>

<style lang="less">
.modal-header {
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  position: relative;
  height: 20px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);

  &-fullscreen {
    position: absolute;
    right: 30px;
    cursor: pointer;

    i:hover {
      color: black !important;
    }
  }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
